@charset "utf-8";
@import "reset";
@import "header";
@import "footer";
@import "common";

section{
    padding-top: r(96px);
    padding-bottom: r(96px);
    .banner{
        position: relative;
        width: 100%;
        .img-warp{
            width: 100%;
//          margin-top: r(7px);
            img{
                width: r(640px);
                height: r(340px);
                display: block;
            }
        }
        
        .bottom{
            width: 100%;
            height: r(104px);
            background-color: rgba(0,0,0,.7);
            position: absolute;
            top: r(236px);
            right: 0;
            font-size: 0;
            .bottomtext{
                width: r(591px);
                height: r(38px);
                font-size: r(25px);
                line-height: r(38px);
                margin: r(19px) auto 0 auto;
                color: white;
                max-height: r(38px);
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                &>span{
                    display: inline-block;
                    height: r(38px);
                    background-color: #b20000;
                }
            }
            .bannernav{
                width: 100%;
                font-size: 0;
                position: absolute;
                left: 0;
                top: r(71px);
                text-align: center;
                ul{
                    display: inline-block;
                    
                    &::after{
                        content: "";
                        display: block;
                        clear: both;
                    }
                    li{
                        float: left;
                        width: r(8px);
                        height: r(8px);
                        margin-right: r(24px);
                        background-color: white;
                        border-radius: 50%;
                        &:last-of-type{
                            margin-right: 0;
                        }
                    }
                    .active{
                        background-color: #b20000;
                    }
                    
                }
            }
            
            
            
        }
        
    }
    
    .content{
        width: r(583px);
//      height: ;
        margin:0 auto;
        .cell{
            width: r(282px);
//          padding-bottom: r(6px);
            float: left;
            margin-top: r(20px);
//          height: r(343px);
//          background-color: black;
            margin-right: r(19px);
            &:nth-of-type(2n){
                margin-right: 0;
            }
            .cellimg{
                img{
                    width: r(282px); 
                    height: r(182px);
                    display: block;
                }
            }
            .cellbottom{
                width: 100%;
                background-color: #f6f6f6;
                overflow: hidden;
                padding-bottom: r(6px);
                p:first-of-type{
                    width: r(270px);
                    margin-top: r(15px);
                    margin-left: r(3px);    
                    font-size: r(22px);
                }
                p:nth-of-type(2){
                    margin: r(15px) auto 0 auto;
                    width: r(266px);
                    font-size: 0;
                    span:first-of-type{
                        display: block;
                        width: r(88px);
                        height: r(27px);
                        line-height: r(30px);
                        
                        text-align: center;
                        float: left;
                        background-color: #b20000;
                        
                        border-radius: r(4px);
                        a{
                            color: white;
                            font-size: r(18px);
                            display: block;
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .icon-aixin{
                        display: block;
                        width: r(65px);
                        height: r(27px);
                        font-size: r(19px);
                        color: #c5c5c5;
                        line-height: r(27px);
                        float: right;
                        margin-right: r(5px);
                    }
                    .icon-CombinedShape-{
                        display: block;
                        width: r(70px);
                        height: r(27px);
                        font-size: r(19px);
                        color: #c5c5c5;
                        line-height: r(27px);
                        float: right;
                    }
                }
                
                p:nth-of-type(4){
                    width: r(266px);
                    overflow: hidden;
                    margin-top: r(14px);
                    margin-left: r(7px);
                    .icon-2{
                        width: r(35px);
                        height: r(35px);
                        background-color: #dedede;
                        color: #b7b7b7;
                        font-size: r(35px);
                        display: block;
                    }
                    span:nth-of-type(2){
                        display: block;
                        margin-left: r(8px);
                        height: r(35px);
                        line-height: r(38px);
                        font-size: r(17px);
                        color: #b7b7b7;
//                      font-size: ;
                    }
                }
                
                
                
            }
            
        }
    }
    
    .more{
        width: 100%;
//      height: ;
        font-size: 0;
        
        text-align: center;
        
        a{
            width: 100%;
            height: 100%;
            color: #bbbbbb;
            font-size: r(22px); 
            line-height: r(73px);
            display: block;
            width: 100%;
            height: 100%; 
        }
    }
    
}
        
